﻿

/* ************************************************************************
Section: body
Description: Styling the bottom "footer" of page.
************************************************************************** */
body
{
	/*background-color:#eef7dd;*/
    background-color: #e4f2fd;
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    color: #696969;
}


/* ************************************************************************
Section: Header
************************************************************************** */
#header
{
    background-color:Black;
    font-family:Arial;
    border-style:none;
    height:70px;
}

#header .title
{
	font-size:24px;    
	color:#CCCCCC;
    font-weight: bold;
    border: none;
}

#header .left
{
    display:block;
    float:left;    
    text-align:left;
    font-size:18px;    
    padding-right:20px;
}

#header table
{
	border-style:none;
	width:100%;
}

#header table td
{
	border-style:none;
	text-align:center;
}


/* ************************************************************************
Section: login
************************************************************************** */
#logindisplay
{
    display:block;
    text-align:right;
    margin:10px;
    color:White;
}

#logindisplay a
{
	font-size:10px;
	text-decoration:underline;
	padding-right:15px;
}

#logindisplay a:link
{
    color: orange;
    font-weight:bold;
}

#logindisplay a:visited
{
    color: orange;
    font-weight:bold;
}

#logindisplay a:hover
{
    color: White;
    font-weight:bold;
    text-decoration: none;
}


/* ************************************************************************
Section: menu
************************************************************************** */
#menu
{
	font-family:Arial;
	font-size:16px;
	font-weight:normal;
	background-color:Black;
	text-align:center;
	border-bottom:solid 4px #0098fc;
}

#menu a
{
    text-decoration: none;
    background-color: Black;
    color: White;
    padding:4px 20px 0px 20px;
}

#menu a:hover
{
    background-color:#0098fc;    
    color:White;
}

#menu a:active
{
    background-color: Black; 
    color: White;
}


/* ************************************************************************
Section: footer
Description: Styling the bottom "footer" of page.
************************************************************************** */
#footer
{
    background-color:Black;
    color:Gray;
    font:normal normal bold 11px Verdana, Arial, Serif;	
    padding: 8px 5px 8px 5px;
    text-align: center;
}

#footer a
{
    color: white;
    padding-right:10px;
    text-decoration: underline;
}

#footer a:visited
{
    color: white;
    padding-right:10px;
    text-decoration: underline;
}

#footer a:hover
{
    color: white;
    padding-right:10px;
    text-decoration: none;
}

#copyright
{
	padding-left: 50px;
	padding-right: 30px;
}


/* ************************************************************************
Section: Content Items
Description: This is for the create/edit areas of any content item(post, 
event, etc)
************************************************************************** */
.contentItem .form
{
	border:dotted 1px #cccccc;
	padding:4px 4px 4px 4px;
}


.contentItem .header
{
	background-color:#eeeeee;
}


/* ************************************************************************
Section: post
Description: These are used for styling a post and are used for both on the
index/listing page and for the details page.
************************************************************************** */
.listing table
{
	width:90%;
}

.post
{
	background-color:White;	
}

.post .header
{
	background-color:White;
	color:#333333;
	font-weight:bold;
	font-size:20px;
}

.post .user
{
	color:#2166af;
}

.post .date
{
	color:#4188cf;
}

.post .time
{
	color:Black;
}

.post .content
{
	width:80%;
}

.post .tags
{
	color:#999999;
	font-weight:bold;
}

.post a
{
	color:#333333;
	font-weight:bold;
	text-decoration:none;
}

.post a:visited
{
	color:#333333;
}

.post a:hover
{
	color:Orange;
	font-weight:bold;
}

.post .actions
{
	background-color:#f4f4f4;
	padding:3px 0px 3px 0px;
}

.post .actions a
{
	color:#666666;
	font-weight:bold;
	text-decoration:none;
}

.post .actions a:visited
{
	color:#666666;
}

.post .actions a:hover
{
	color:Orange;
}


/* ************************************************************************
Section: Widgets
Description: These css entries are used for the widgets displayed in the 
side bar. E.g. Recent Posts, Tags, Archives are all widgets.
The header corresponds to the text/heading of the widget as in "Archives"
************************************************************************** */
.widget
{
	padding-top:10px;
	text-align:left;
}

.widget .wheader
{
	background-color:White;
	text-align:left;
	color:#0098fc;
	font-weight:bold;
	font-size:16px;
	border-bottom:dotted 2px #cccccc;
}


.widget .wtitle
{
	font-weight:bold;
	font-size:13px;
}

.widget .wbody
{
	background-color:#ffffff;
	padding-bottom:3px;
	text-align:left;
}

.widget ul 
{
	list-style: none;
	margin-left: 8px;
	padding-left: 1em;
	text-indent: -1em;
}

.widget li
{
	list-style-type:none;
	padding-bottom:9px;
	padding-left:2px;
}

.widget .wbody a
{
	color:#999999;
	font-weight:bold;
	text-decoration:none;
}

.widget .wbody a:visited
{
	color:#999999;
}

.widget .wbody a:hover
{
	color:Black; /*#4169e1;*/
	font-weight:bold;
}

.widgeteditarea
{	
	margin-bottom:10px;
	text-align:right;
}

.widgeteditarea a { color:#999999; text-decoration:none; }
.widgeteditarea a:hover { color:Black; }
.widgeteditarea a:visited { color:#999999; }



/* ************************************************************************
Section: Tags
Description: There are currently only 5 weights being used for the tags.
************************************************************************** */
#tagcloud
{
    
    padding:5px;
    margin-bottom:10px;
    text-align:justify;
}

#tagcloud a
{
    text-decoration:none;
    margin-left:5px;
    margin-right:5px;
    font-family:Trebuchet MS, Verdana, Arial;
    text-transform:lowercase;
}

#tagcloud a:hover
{
    color:#00cc00;
    text-decoration:underline;
}

#tagcloud a.size1
{
    color: #4269d2;
    font-size: 25px;
    font-weight:bolder;
}
#tagcloud a.size2
{
    color: #4465e1;
    font-size:21px;
    font-weight:bolder;
}
#tagcloud a.size3
{
    color: #027def;
    font-size: 17px;
    font-weight:bolder;
}
#tagcloud a.size4
{
    color: #4367cb;
    font-size: 13px;
}
#tagcloud a.size5
{
    color: #63ade8;
    font-size: 10px;
}


/* ************************************************************************
Section: Pager
Description: CSS for the pager thats used for paging through many posts.
************************************************************************** */
.pager
{	
	margin-left:auto;
	margin-right:auto;
}

.pager a 
{
    text-decoration: none;    
    color:#2166af;
    font-size:14px;
    font-weight:bold;
    padding:3px 5px 3px 5px;
    margin:0px 4px 0px 4px;
    border:solid 1px #83bcd8;
}

.pager a:hover 
{	
	background-color:Orange;
	color:Black;
}


.pager a.current
{
    background-color:#2166af;
    font-weight:bold;
    font-size:13px;
    color:White;    
}


/* ************************************************************************
Section: Diagnostics
Description: CSS for the diagnostic information displayed at the bottom of
the menu. This corresponds to the user:, env:, database: etc fields that 
are displayed and useful for powerusers/admins/developers.
************************************************************************** */
#diagnostics
{
	text-align:center;
	background-color:White;
	padding:3px 0px 5px 0px;	
	color:Black;
}

#diagnostics .dev
{
	color:#2166af;
}


#diagnostics .qa
{
	color:#2166af;
}


#diagnostics .uat
{
	color:Orange;
}


#diagnostics .prod
{
	color:Red;
}


#diagnostics .dfield
{	
	font-weight:bold;
	color: Black;
}


/* ************************************************************************
Section: Dashboard panel on side bar
Description: CSS for the diagnostic information displayed at the bottom of
the menu. This corresponds to the user:, env:, database: etc fields that 
are displayed and useful for powerusers/admins/developers.
************************************************************************** */
#dashboard
{
	background-color:White;
	padding:5px 5px 5px 10px;	
}

#dashboard .section
{
	
}

#dashboard .header
{
	color:#2166af;
	font-weight:bold;
	font-size:15px;
	background-color:#eeeeee;
}

#dashboard a
{
	text-decoration:none;
	color:#2166af;
}


#dashboard a.visited
{
	color:#2166af;
}

#dashboard .bodyheader
{
	color:#333333;
	font-weight:bold;
	font-size:13px;	
}

#dashboard .body
{
}

#dashboard li
{
	list-style-type:none;
	padding-bottom:5px;
}


/* ************************************************************************ 
Section: System settings styles.
Description: Styles for index/manage entities table's/lists.
************************************************************************** */
table.systemlist
{
  border: solid 1px #e8eef4;
  border-collapse: collapse;
}

table.systemlist td 
{
  padding: 7px;   
  border: solid 1px #e8eef4;
}

table.systemlist th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #e8eef4; 
  border: solid 1px #e8eef4;   
}

.systemlist a
{
	color:#666666;
	font-weight:bold;
	text-decoration:none;
}

.systemlist a.visited
{
	color:#666666;
}


/* ************************************************************************ 
Section: Action buttons
Description: Styles for any button that performs some action.
************************************************************************** */
.actionbuttonarea
{
	text-align:center;
	margin-top:15px;
	margin-bottom:20px;
}

input.action
{
	border-color:#ea890a;
	border-width:1px;
	color:White;
	font-weight:bold;
	background-color:Orange;
}

a.actionlink
{
	text-decoration:none;
	color:#2166af;
	font-weight:bold;
	padding-right:15px;
}

a:visited.actionlink
{
	color:#2166af;
}


a.actionbutton
{
	border: solid 1px #ea890a;
	color:White;
	font-weight:bold;
	background-color:Orange;
	padding: 4px 7px 4px 7px;
	text-decoration:none;
	margin-right:20px;
}

a:visited.actionbutton
{
	color:White;
}

/* ************************************************************************
Section: Page Widths
Description: Various styles for general usage.
************************************************************************** */
.page
{
    width: 1100px;
    margin-left: auto;
    margin-right: auto;
    border-left:solid 2px #cccccc;
    border-right:solid 2px #cccccc;
}

.sidebarLeft
{
	width:200px;
}


.sidebarRight
{
	width:200px;
	margin-top:0px;
}

.pagebody
{
    background-color:White;
    padding: 10px 12px 10px 12px;    
}

.pagebodycontent
{
	padding-left:10px;	
	padding-right:7px;
	width:625px;
	margin-right:12px;
	margin-left:12px;
}

.pagetable td
{
	vertical-align:top;
}

/* ************************************************************************
Section: Miscellaneous
Description: Various styles for general usage.
************************************************************************** */
.usercloud
{
	text-align:center;
}

.usercloud img
{
	padding-right:7px;
	padding-bottom:7px;
}

.centered
{
	margin-left:0px;
	margin-right:0px;
}

fieldset 
{
    margin: 1em 0;
    padding: 1em;
    border: 0px;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset label 
{
    display: block;
    color:#999999;
    font-weight:bold;
}

.example
{
	font-size:10px;
	color:#999999;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}


input.wide
{
	width:450px;
}


textarea.text-area
{
    width: 450px;
    height:200px;
    border: 1px solid #CCC;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

.cell-spacer
{
	width:25px;
}


.clear
{
    clear: both;
}

.error
{
    color:Red;
}

.message
{
	color:#333333;
	font-weight:bold;
}


.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}


.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

.display-label,
.editor-label
{
    font-weight: bold;
}

.display-label,
.editor-label,
.display-field,
.editor-field
{
    margin: 0.5em 0;
}

.separator
{
	color:#6dbc1e;
	font:normal normal bold 12px Verdana, Arial, Serif;
	border-bottom:dotted 1px #cccccc;
}
